<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			color: #fff;

		}
		.father{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}
		.son{
			width: 100px;
			height: 100px;
			background: green url() 0 0 no-repeat;
		}
		.box{
			width: 200px;
			height: 200px;
			background: blue url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">

		window.onload = function  () {

			var son = document.getElementById('son');

			// console.log(son.parentNode);

			// console.log(son.childNodes);
			
			// son.childNodes[1].style.color='blue'
			// son.parentNode.style.background="yellow";
			// son.parentNode.parentNode.style.background='red

			// son.parentNode.nextSibling.nextSibling.childNodes[3].style.color="red";
		}


	</script>
</head>
<body>
	<div class="father">
		<div class="son" id="son">
			<span>son1</span>
			<span>son2</span>
		</div>
		<p>学并思</p>
		<p>学并思</p>
	</div>

	<div class="box">
		<p class="boxson">学燕民</p>
		<p class="a">学并思</p>
	</div>

	<div class="box">
		<p class="boxson">学燕民</p>
		<p class='a'>学并思</p>
	</div>
	
</body>
</html>